<template>
  <div class="classify">
    <el-card class="box-card">
      <ul>
        <li v-for="(item, index) in data" :key="index" @click="liclick(index)">
          {{ item }}
        </li>
      </ul>
    </el-card>
  </div>
</template>

<script >
import { defineComponent } from "vue";

export default defineComponent({
  components: {},
  setup() {
    const data = [
      "我的收藏",
      "我关注的问题",
      "我的邀请",
      "我的余额",
      "站务中心",
      "帮助于客服",
      "版权服务中心",
    ];
    const liclick = (e) => {
      console.log(e);
    };
    return { data, liclick };
  },
});
</script>

<style scoped lang="less">
.classify {
  margin-top: 10px;
  /deep/.el-card__body {
    padding: 0;
    > ul {
      padding: 0;
      margin: 10px 0px 10px 0px;
      > li {
        color: #8590a6;
        padding-left: 30px;
        display: block;
        height: 40px;
        line-height: 40px;
        list-style: none;
      }
      & > li:hover {
        background-color: #f6f6f6;
        cursor: pointer;
      }
    }
  }
}
</style>
